<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		worldMoreInfoApi
	} from "../../api/request.js"
	const props = defineProps({});
	let platform = uni.getStorageSync('platform')
	onMounted(() => {});
	const info = ref({})
	onLoad(async (e) => {
		console.log(e.id);
		let res = await worldMoreInfoApi({
			word: e.id
		})
		info.value = res.data
		console.log(info.value);
		info.value.stem_affix = info.value.stem_affix || {}
	})
	const goback = () => {
		uni.navigateBack()
	}
</script>

<template>
	<view class="wrap" :style="{
		height:platform.gaodu+'rpx'
	}">
		<view class="header-wrap uni-row" :style="{
				paddingTop:platform.dingbu+'rpx',
	height:platform.dingbu+96-20+'rpx'			
			}">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title">
				拓展
			</view>
			<image class="left" src="/static/img/goback-black.png" mode="widthFix" style="opacity: 0;" />
		</view>
		<scroll-view :style="{
		height:platform.gaodu -platform.dingbu-96+'rpx'
	}" scroll-y="true" class="wai">
			<view class="body">
				<view class="" style="height: 20rpx;">

				</view>
				<view class="title" style="margin-top: 0;">
					变形：
				</view>
				<view class="value uni-row" v-for="(item,index) in info.s_exchange" :key="index">
					<view class="yingwen">
						{{item.split(':')[1]}}:
					</view>
					<view class="labels">
						{{item.split(':')[0]}}
					</view>
				</view>
				<view class="title">
					固定搭配：
				</view>
				<view class="label yingwen" v-for="(item,index) in info.y_phrases" :key="index">
					{{item.phrase}} {{item.meanings[0]}}
				</view>
				<view class="title" v-if="info.s_stemAffix&&
				info?.s_stemAffix?.stem
				">
					词根助记：
				</view>
				<view class="danci uni-row" v-if="info.s_stemAffix&&
				info?.s_stemAffix?.stem
				">
					<view class="label actives">
						{{info.s_stemAffix.prefix.detail}}+
					</view>
					<view class="label defaults">
						{{info.s_stemAffix.stem.detail}}+
					</view>
					<view class="label actives">
						{{info.s_stemAffix.suffix.detail}}
					</view>
					<view class="label">
						= {{info.word}}
					</view>
				</view>
				<view class="title">
					例句：
				</view>
				<view class="more" v-for="(item,index) in info.y_sentences" :key="index" style="margin: 10rpx 0;">
					<view class="juzi" v-html="item.sentence">
					</view>
					<view class="label">
						{{item.meaning}}
					</view>
				</view>
				<view class="" style="height: 20rpx;">

				</view>
			</view>
			<view class="" style="height: 20rpx;">
			</view>
		</scroll-view>

	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 28rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 0 28rpx 0;
			margin: 0 28rpx;
			background-color: #fff;
			border-radius: 8rpx;

			.title {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
			}

			.value {
				font-size: 24rpx;
				color: #333333;

				.yingwen {}

				.labels {}
			}

			.label {
				font-size: 24rpx;
				color: #333333;
				margin-top: 4rpx;
			}

			.label {
				&.actives {
					color: #222868;
				}

				&.defaults {
					color: #fa862c;
				}

			}

			.more {
				margin-top: 4rpx;
				font-size: 24rpx;

				.juzi {
					color: #333;
				}

				.label {
					color: #999999;
				}
			}
		}
	}
</style>